<template>
    <div class="footerbox">
        <van-tabbar v-model="active" placeholder=true>
            <van-tabbar-item name="/home" icon="shop-collect-o" @click="gohome">首页</van-tabbar-item>
            <van-tabbar-item name="/class" icon="apps-o" @click="gotoclass">分类</van-tabbar-item>
            <van-tabbar-item name="/find" icon="eye-o" @click="gotocar">发现</van-tabbar-item>
            <van-tabbar-item name="/user" icon="user-o" @click="gotomine">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useComon } from '../Hooks/comon'
import { useRoute } from 'vue-router';

const route = useRoute()
const { gotowhere } = useComon()
const active = ref('')
active.value=route.path


onMounted(() => {
    console.log(route.path);
})

const gohome = () => {
    gotowhere('/home')
}
const gotoclass = () => {
    gotowhere('/class')
}
const gotocar = () => {
    gotowhere('/find')
}
const gotomine = () => {
    gotowhere('/user')
}
</script>


<style>
.footerbox {
    z-index: 9999;
}
</style>